<template>
  <el-row :gutter="15">
    <el-col :span="16">
      <Portlet title="角色权限">
        <el-row>
          <el-col :span="16">
              <el-form-item label="角色名称" :prop="'roleIds.' + index + '.roleId'" :rules="[
                    {required: true, message: '角色必须', trigger: 'change'}
                  ]">
                <el-select v-model="item.roleId" filterable placeholder="请选择角色" @change="change">
                  <el-option v-for="x in getDisableArr"
                             :disabled="x.disabled"
                             :key="x.id"
                             :label="x.name"
                             :value="x.id">
                  </el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button class="btn-block" type="warning" :disabled="this.itemArr.length == 1" @click.prevent="delRole(index)">删除</el-button>
          </el-col>
            <el-col :span="4">
            <el-button class="btn-block" type="primary" v-if="index == (this.itemArr.length - 1)"   @click.prevent="addRole">分配角色</el-button>
            </el-col>
        </el-row>
      </Portlet>
    </el-col>

    <!--显示菜单权限-->
    <el-col :span="8">
      <Portlet title="菜单权限">
        <el-tree :data="item.treeData || []" ref="jsTree"></el-tree>
      </Portlet>
    </el-col>
  </el-row>
</template>

<script>
import {dotData, arrayToTree} from '@/utils'
// import {getOrgRoleArr} from '@/service/selectOptions'
export default {
  components: {
  },
  props: {
    item: {
      type: Object,
      required: true
    },
    itemArr: {
      type: Array,
      required: true
    },
    index: {
      type: Number,
      required: true
    },
    projectType: {
      type: String,
      default: ''
    },
    isInsert: {
      type: Number,
      default: 0
    }
  },
  computed: {
    // 已经选中过了的数组
    usedArr() {
      return this.itemArr.map(v => v.roleId)
    },
    // 从总的数组中，找出已经选中了的数组，将其设为禁用
    getDisableArr() {
      return this.roleArr.map(v => {
        let item = Object.assign({}, v)
        if (this.usedArr.indexOf(v.id) >= 0) {
          item.disabled = true
        }
        return item
      })
    }
  },
  data() {
    return {
      roleArr: [],
      backOrgRoleList: [] // 修改时，请求详情中的 角色名+菜单id ---> 回填
    }
  },
  created() {
    // getOrgRoleArr().then(arr => {
    //   this.roleArr = arr
    // })
    // if (this.id) {
    //   this.getMenu()
    // }
    if (this.item && this.item.roleId) {
      this.change(this.item.roleId)
    }
    this.getRoleArr()
  },
  methods: {
    // 获取角色
    getRoleArr() {
      this.$ajax.get('/ms-common-user/role/role-list', {
        projectType: this.projectType,
        isInsert: this.isInsert
      }).then(response => {
        this.roleArr = response.data || []
      })
    },
    // 获取所有菜单id---改为：用该公司id 来获取当前公司下的所有菜单
    change(val) {
      this.$ajax.get('/ms-common-user/menu/getOrgMenus', {roleId: val}).then(response => {
        const success = dotData(response, 'success')
        if (success) {
          this.formatTreeData(dotData(response, 'data'))
        }
        console.log(this.item)
      })
    },
    // 设置tree数据
    formatTreeData(arr, nameKey = 'name', idKey = 'id', format = (tree) => { return tree }) {
      if (Array.isArray(arr)) {
        let temp = []
        arr.forEach(v => {
          let text = v[nameKey]
          if (v.jurisdiction) {
            text = '<span class="font-red">' + v[nameKey] + '</span>'
          }
          temp.push({
            label: text,
            menuId: v[idKey], // 展示层级 关系 用的
            data: {
              menuId: v[idKey] // 展示数据
            },
            parentId: v.parentId,
            state: {opened: false, selected: v.selected}
          })
        })
        this.$set(this.item, 'treeData', arrayToTree(temp, 'menuId', 'parentId', 'children', '0', true))
      }
    },
    // 添加一个角色
    addRole() {
      this.$emit('addRole', true)
    },
    // 删除一个角色
    delRole(index) {
      this.$emit('delRole', index)
    }
    // 模拟： 修改时 需要的 该id所请求到的详情数据--> 用于回填 头部数据
    // getMenu () {
    //   this.$ajax.get('/ms-user-info/org-user/findByOrgUser', {userId: '706c4450-45ed-11e7-9e18-0242ac120013'}).then(response => {
    //     this.backOrgRoleList = dotData(response, 'data.orgRoleList') || []
    //     if (dotData(response, 'success')) {
    //       let temp = []
    //       this.backOrgRoleList.forEach(v => { // v：所包含的每一个角色 + 该角色所对应的菜单id数组
    //         temp.push({
    //           name: v.name,
    //           roleId: v.orgMenuList
    //         })
    //       })
    //       this.model.addArr = temp
    //     }
    //   })
    // }
  }
}
</script>
